<template>
  <div class="user-consume">
    <box-border title-button="消费记录" />
    <div>
      <el-form
        ref="form"
        size="medium"
        label-position="right"
        class="user-consume-search"
        :model="formSearch"
        label-width="110px"
        :inline="true"
      >
        <el-form-item label="时间查询：">
          <el-date-picker
            v-model="formSearch.dateVal"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          /></el-form-item>

        <el-form-item label="课程状态：">
          <el-select v-model="formSearch.classState" placeholder="请选择课程状态">
            <el-option v-for="(item,index) in classStateList" :key="index" :label="item.state" :value="item.state" />
          </el-select>
        </el-form-item>

        <el-form-item label="课程/老师名：" :inline-message="true">
          <div class="user-consume-search-input">
            <el-input v-model="formSearch.inputVal" />
          </div>
        </el-form-item>
        <el-button
          style="padding-right: 30px;margin:0px 20px"
          type="primary"
          icon="el-icon-search"
          @click="getOrFindUserConsumeList"
        >搜索</el-button>
        <el-button
          style=" padding-right: 30px"
          type="primary"
          icon="el-icon-search"
          @click="handleReset"
        >重置</el-button>
      </el-form>
    </div>
    <div class="user-consume-table">
      <el-table
        :data="userConsumeList"
        :border="true"
        style="width: 100%"
        :lazy="true"
        :header-cell-style="changHeaderStyle"
      >
        <el-table-column
          prop="id"
          label="订单流水号"
          width="width"
          align="center"
        />
        <el-table-column
          prop="start_time"
          label="创建时间"
          width="width"
          sortable
          align="center"
        />
        <el-table-column
          prop="currentname"
          label="课程名称"
          width="width"
          align="center"
        />
        <el-table-column
          prop="state"
          label="课时状态"
          width="width"
          align="center"
        />
        <el-table-column
          prop="currnum"
          label="课时数"
          width="width"
          align="center"
          sortable
        />
        <el-table-column
          prop="lastcurrnum"
          label="剩余课时数"
          width="width"
          align="center"
        />

      </el-table>
    </div>
    <div class="user-consume-pagination">

      <el-pagination
        :current-page="currentPage"
        :page-sizes="[2,4,6,10]"
        :page-size="limit"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      currentPage: 1,
      total: 0,
      limit: 4,
      userConsumeList: [],
      formSearch: {
        dateVal: '',
        inputVal: '',
        classState: ''
      },
      classStateList: []
    }
  },

  mounted() {
    this.getOrFindUserConsumeList()
    this.getClassState()
  },
  methods: {
    // 头部样式
    changHeaderStyle({ row, rowIndex }) {
      return 'background:rgba(237,208,108,0.5);'
    },

    // 数据限制的条数回调
    handleSizeChange(limit) {
      this.limit = limit
      this.getOrFindUserConsumeList()
    },
    // 点击当前页
    handleCurrentChange(page) {
      this.currentPage = page
      this.getOrFindUserConsumeList()
    },
    // 获得课程状态
    async getClassState() {
      const result = await this.$API.user.getClassState()
      this.classStateList = result.data
    },
    // 搜索消费课程
    async getOrFindUserConsumeList() {
      // eslint-disable-next-line prefer-const
      let { dateVal, inputVal, classState } = this.formSearch
      const { currentPage, limit } = this
      dateVal = dateVal || []
      try {
        const result = await this.$API.user.getOrFindUserConsumeList({
          page: currentPage,
          size: limit,
          currentname: inputVal,
          start_time: dateVal[0] || '',
          last_time: dateVal[1] || '',
          state: classState
        })
        this.userConsumeList = result.data.rows
        this.total = result.data.count
      } catch (err) {
        console.log(err)
      }
    },
    handleReset() {
      Object.assign(this.$data, this.$options.data())
      this.getClassState()
      this.getOrFindUserConsumeList()
    }
  }
}
</script>

<style lang="scss" scoped>
.user-consume {
  .user-consume-search {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    margin-top: 70px;
    .user-consume-search-input {
      width: 100%;
      display: flex;
      justify-content: space-between;
      input {
        -webkit-appearance: none;
        background-color: #fff;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        width: 300px;
        margin-right:3px;
      }
    }
  }
  .user-consume-table{
    margin-top:50px;
  }
  .user-consume-pagination{
    margin-top:50px;
    text-align: center;
    // margin: 0 auto;
  }
}
</style>
